<template>
  <div id="user-card">
    <div class="user-card">
      <!-- <van-contact-card type="edit" :name="user.name" :tel="user.tel" /> -->
      <img src="@/assets/img/profile/user.jpg" alt="" />
      <div class="user-info">
        <div>昵称： {{ name }}</div>
        <div>电话：{{ tel }}</div>
        <div>个性签名：{{ intro }}</div>
      </div>
      <div class="right-icon">
        <van-icon name="arrow" color="white"></van-icon>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from "@/components/common/navbar/NavBar.vue";

export default {
  name: "UserCard",
  components: {
    NavBar,
  },
  props: {
    name: String,
    tel: String,
    intro: String,
  },
  data() {
    return {
      user: {},
    };
  },
  methods: {
    onEdit() {},
  },
};
</script>

<style scoped>
#user-card {
  box-shadow: 0 0.05333rem 0.13333rem var(--color-tint);
  background: linear-gradient(90deg, #fc6782, var(--color-tint));
  border-radius: 10px;
  margin: 5%;
  width: 90%;
}
.user-card {
  display: flex;
  padding: 10px;
}
.user-card img {
  padding: 5px 0;
  width: 50px;
}
.user-card .user-info {
  color: aliceblue;
  padding-left: 10px;
  flex: 1;
}
.user-card .user-info div {
  margin: 5px 0;
}
.user-card .right-icon {
  width: 10%;
}
.user-card .right-icon:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.user-card .right-icon .van-icon {
  vertical-align: middle;
}
</style>
